﻿@page "/"
@namespace BlazorDemo.ServerSide.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@inject BlazorDemo.Services.DemoThemeService Themes
@inject Microsoft.AspNetCore.Http.IHttpContextAccessor HttpContextAccessor

@{
    var InitialThemeName = HttpContextAccessor.HttpContext.Request.Cookies[BlazorDemo.Services.DemoThemeService.ThemeCookieKey];
    Themes.SetActiveThemeByName(InitialThemeName);
    var bsTheme = Themes.GetBootstrapThemeCssUrl(Themes.ActiveTheme);
    var dxTheme = Themes.GetThemeCssUrl(Themes.ActiveTheme);
    var hlTheme = Themes.GetHighlightJSThemeCssUrl(Themes.ActiveTheme);
}
<!DOCTYPE html>
<html lang="en" data-bs-theme="@Themes.ActiveTheme.BootstrapThemeMode"  >
<head>
    <meta data-dxmetadatamanager />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="@Url.Content("~/")" />

    <meta property="og:url" content="https://dxpr.es/2WogLq7" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Native Blazor Components powered by DevExpress" />
    <meta property="og:description" content="DevExpress UI for Blazor ships with native user interface components (including a Data Grid, Pivot Grid, Charts and Scheduler) so you can design rich user experiences with both Blazor." />
    <meta property="og:image" content="https://static.devexpress.com/Products/Blazor/blazor-components-grid-pivot-scheduler-charts-editor-devexpress.jpg" />
    <meta http-equiv="Content-Security-Policy"
          content="base-uri 'self';
               default-src 'self';
               img-src data:
                       https:
                       http:;
               object-src 'none';
               script-src 'self'
                          'unsafe-eval'
                          https://cdn.jsdelivr.net/
                          https://www.googletagmanager.com/
                          https://*.bing.com
                          https://*.virtualearth.net
                          'sha256-v8v3RKRPmN4odZ1CWM5gw80QKPCCWMcpNeOmimNL2AA='
                          'sha256-5IekJdLtTzD/IDYQ2FrNLbLmgyGP6WlpDJ2GbZLv+r0='
                          'sha256-3/2QOuYlxn5k9KorO7FOcY7NYI+Ui/I3n7nr0X+IWcE='
                          'sha256-CLBTNKc5dWx2th3lg9lPM2K199I5ZFDpfsv8w5I+A/E=';
               worker-src 'self'
                          blob:;
               frame-src 'self'
                         blob:;
               style-src 'self'
                         https://cdnjs.cloudflare.com/
                         https://fonts.googleapis.com/
                         https://*.bing.com
                         'unsafe-inline';
               font-src 'self'
                        data:
                        https://fonts.gstatic.com/;
               connect-src 'self'
                        https://*.bing.com
                        https://*.virtualearth.net
                        https://js.devexpress.com/;
               block-all-mixed-content;
          ">
    @if (!string.IsNullOrEmpty(bsTheme))
    {
        <link rel="stylesheet" href="@bsTheme" asp-append-version="true" bs-theme-link />
    }
    @if (!string.IsNullOrEmpty(dxTheme))
    {
        <link rel="stylesheet" href="@dxTheme" asp-append-version="true" dx-theme-link />
    }
    @if (!string.IsNullOrEmpty(hlTheme))
    {
        <link rel="stylesheet" href="@hlTheme" asp-append-version="true" hl-theme-link />
    }
    <link rel="stylesheet" href="~/_content/BlazorDemo/css/dx-demo.css" asp-append-version="true" dx-demo-link>
    <link rel="stylesheet" href="~/_content/BlazorDemo/css/dx-demo-pages.css" asp-append-version="true">

    <environment include="ServerSide">
        <link rel="stylesheet" href="BlazorDemo.ServerSide.styles.css" asp-append-version="true">
        <component type="typeof(BlazorDemo.Shared.DemoThemeJsChangeDispatcher)" render-mode="ServerPrerendered" param-InitialThemeName="@InitialThemeName" />
        <script src="_framework/blazor.server.js" defer></script>
    </environment>
    <environment include="Wasm.AspNetCoreHosted">
        <link rel="stylesheet" href="BlazorDemo.Wasm.Server.styles.css" asp-append-version="true">
        <component type="typeof(BlazorDemo.Shared.DemoThemeJsChangeDispatcher)" render-mode="WebAssemblyPrerendered" param-InitialThemeName="@InitialThemeName" />
        <script src="_framework/blazor.webassembly.js" defer></script>
    </environment>
    <environment include="Wasm.AspNetCoreHosted">
        <style>
            body {
                margin: 0;
            }

            .loading-font {
                font-family: "Segoe UI",Roboto,"Helvetica Neue","-apple-system",BlinkMacSystemFont,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
                font-size: .88rem;
                font-weight: 400;
                line-height: 1.5;
                text-align: left;
            }

            .loading-items-center {
                align-items: center;
                justify-content: center;
                display: flex;
            }

            .loading-border-primary {
                border-color: #bfbfbf;
            }

            .loading {
                width: 140px;
                height: 140px;
            }

            .loading-caption {
                font-size: 1.5rem;
                font-weight: 600;
            }

            .loading-border {
                border-width: 4px;
                border-style: solid;
            }

            .loading-image-wrapper {
                width: 120px;
                height: 120px;
                opacity: 0;
            }
        </style>
    </environment>
</head>
<body>
    @{
        var isIEOrEdgeLegacy = Request.Headers["User-Agent"].Any(userAgent => userAgent.Contains("MSIE") || userAgent.Contains("Trident"));
    }
    @if(isIEOrEdgeLegacy) {
        <component type="typeof(BlazorDemo.Shared.BrowserNotSupported)" render-mode="Static" />
    } else {
        <div id="app">
            <environment include="ServerSide">
                <component type="typeof(BlazorDemo.App)" render-mode="ServerPrerendered" />
            </environment>
            <environment include="Wasm.AspNetCoreHosted">
                <div id="applicationLoadingPanel" class="loading-items-center loading-font" style="height: 100vh; width: 100vw; background-color: #fff;">
                    <div class="loading-items-center" style="flex-direction: column">
                        <div class="loading position-relative loading-items-center" style="position: relative">
                            <div class="loading-border border-secondary" style="position: absolute; border-color: #d9d9d9; height: 100%; width: 100%; border-radius: 50%"></div>
                            <div class="spinner-border loading-boarder border-primary loading-border-primary" style="position: absolute; height: 100%; width: 100%; border-radius: 50%; border-left-color: transparent !important; border-right-color: transparent !important; border-bottom-color: transparent !important"></div>
                            <div id="loadingBackground" class="loading-image-wrapper text-white bg-primary loading-items-center" style="color: #fff; border-radius: 50%"></div>
                        </div>
                        <div class="loading-caption mt-3">DevExpress UI for Blazor</div>
                        <div class="loading-sm-text text-body mt-1" style="color: #a1a1a1">Loading...</div>
                    </div>
                </div>
            </environment>
        </div>
    }
</body>
</html>
